<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box">你好</div>
  <div id="show"></div>
  <ul>
    <!-- <li>哈尔滨</li>
    <li>沈阳</li>
    <li>长春</li> -->
  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // ready(fn) 加载完成事件
    // $(document).ready(function () { })
    $(function () {

      // box.onclick = function () { }
      // box.addEventListener("click", funcion(){}, true)
      // on绑定事件  在选择元素上绑定一个或多个事件的事件处理函数。
      // $("#box").click(function () { })
      $("#box").on("click", function () {
        console.log("你好啊")
      })
      $("#box").on("mouseover", function () {
        console.log("鼠标移入")
      })
      // box.onclick = function () {
      //   // this--当前发生事件的元素
      // }
      // on事件委托  父元素.on("事件","子元素"，function(){})   父元素真实存在
      $("ul").on("click", "li", function () {
        // $(this)--当前发生事件的元素
        console.log($(this).html())
        $("#show").html($(this).html())
      })
      // 事件绑定
      // $("li").click(function () {
      //   $("#show").html($(this).html())
      // })
      var arr = ["车", "票子", "房子", "电脑"]
      var str = ''
      for (var i = 0; i < arr.length; i++) {
        str += `
            <li>${arr[i]}</li>
          `
      }
      // html(标签或文本)  ===box.innerHTML="标签或文本"
      $("ul").html(str)
      // 
      // 2.off 在选择元素上移除一个或多个事件的事件处理函数。 
      // 元素.off(事件名)
      $("#box").off("click")
      // bind()事件绑定
      $("#box").bind("dblclick", function () {
        console.log("666")
      })
      // unbind()解绑事件
      $("#box").unbind("dblclick")
      // 

    })



  </script>

</body>

</html>